import React, {useEffect, useState} from 'react';
import {Input, Button, Form, Avatar} from 'antd';
import {connect} from "umi";  // 假设你使用了 Ant Design 组件库
import md5 from 'crypto-js/md5';
import {history} from "@@/core/history";

const Unlock: React.FC = (props: any) => {

  const {login: {userInfo}, dispatch} = props
  const [showModal, setShowModal] = useState(false);
  const [password, setPassword] = useState(undefined)

  useEffect(() => {
    dispatch({
      type: 'login/getUserInfo',
    })
  }, [])

  const handleUnlock = () => {
    setShowModal(true);
  };

  const submitForm = () => {
    dispatch({
      type: 'login/unLock',
      payload: md5(password).toString(),
    })
  };

  const cancel = () => {
    setShowModal(false);
  };

  const reLogin = () => {
    dispatch({
      type: "login/logout",
    })
  };

  return (
    <div>
      <h1 className="unlock-title">
        ⚡ 屏幕已锁定
        <div className="unlock-btn" onClick={handleUnlock}>
          <i className="el-icon-unlock"></i>
          解锁
        </div>
      </h1>
      {showModal && (
        <div className="unlock-modal">
          <div>
            <Avatar className="userinfo-unlock" size={64} src={userInfo.avatar} />
            <div style={{position: "relative", marginLeft: "8%", marginBottom: "10px", fontSize: "large", color: "white"}}>{userInfo.name}</div>
          </div>
          <Form
            onFinish={submitForm}
            style={{ width: '320px' }}
          >
            <Form.Item
              name="password"
              rules={[{ required: true, message: '请输入密码' }]}
            >
              <Input.Password
                placeholder="请输入锁屏密码"
                autoComplete="off"
                onChange={(e) => setPassword(e.target.value)}
              />
            </Form.Item>
            <Form.Item>
              <Button style={{color: "#4b9afc"}} type="text" onClick={cancel}>
                取消
              </Button>
              <Button style={{color: "#4b9afc"}} type="text" onClick={reLogin}>
                重新登录
              </Button>
              <Button
                type="primary"
                onClick={submitForm}
              >
                提交
              </Button>
            </Form.Item>
          </Form>
        </div>
      )}
    </div>
  );
};

const mapStateToProps = ({login}) => {
  return {
    login,
  }
}

export default connect(mapStateToProps)(Unlock)
